<template>
  <div class="department-container">
    <div class="main-content">
      <!-- 左侧部门树 -->
      <div class="department-tree-panel">
        <div class="tree-header">
          <span class="header-title">部门架构</span>
        </div>
        <div class="tree-content" >
          <el-tree ref="departmentTreeRef" :data="departmentTreeData" :props="treeProps" node-key="id"
            :default-expand-all="true" :expand-on-click-node="false" :highlight-current="true"
            @node-click="handleNodeClick" class="department-tree">
            <template #default="{ node, data }">
              <div class="tree-node-content">
                <span class="node-label">{{ node.label }} 
                </span>
                <div class="node-actions">
                  <el-button type="text" size="small" @click.stop="handleAddSubDepartment(data)" :icon="Plus"
                    class="action-btn add-btn">
                  </el-button>
                  <el-button type="text" size="small" @click.stop="handleEditDepartment(data)" :icon="Edit"
                    class="action-btn edit-btn">
                  </el-button>
                  <el-button type="text" size="small" @click.stop="handleDeleteDepartment(data)" :icon="Delete"
                    class="action-btn delete-btn">
                  </el-button>
                </div>
              </div>
            </template>
          </el-tree>
          <div v-if="departmentTreeData.length === 0 && !loading"
            style="text-align: center; color: #999; padding: 40px;">
            暂无部门数据
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-panel">
        <div class="panel-header">
          <span class="header-title">{{ selectedDepartmentName }}</span>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
          <el-form :inline="true" class="filter-form" :model="staffFilters">
            <el-form-item label="姓名" prop="realname">
              <el-input v-model.trim="staffFilters.realname" placeholder="请输入姓名" clearable style="width: 160px"
                @keyup.enter="handleSearch" />
            </el-form-item>

            <el-form-item label="手机号" prop="mobile">
              <el-input v-model.trim="staffFilters.mobile" placeholder="请输入手机号" clearable style="width: 160px"
                @keyup.enter="handleSearch" />
            </el-form-item>

            <el-form-item label="职位" prop="role_id">
              <el-select v-model="staffFilters.role_id" placeholder="请选择职位" clearable filterable style="width: 160px">
                <el-option label="全部" value=" "></el-option>
                <el-option v-for="item in init_option?.role_option || []" :key="item.id" :label="item.role_name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否离职" prop="is_leave">
              <el-select v-model="staffFilters.is_leave" placeholder="请选择状态" clearable style="width: 160px">
                <el-option label="全部" value=" "></el-option>
                <el-option label="在职" value="0"></el-option>
                <el-option label="离职" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否登录" prop="is_login">
              <el-select v-model="staffFilters.is_login" placeholder="请选择状态" clearable style="width: 160px">
                <el-option label="全部" value=" "></el-option>
                <el-option label="开启登录" value="1"></el-option>
                <el-option label="关闭登录" value="0"></el-option>
              </el-select>
            </el-form-item>



            <el-form-item>
              <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleAddStaff" :icon="Plus">添加人员</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 表格区域 -->
        <div class="common-table-container">
          <table class="common-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>所属部门</th>
                <th>职位</th>
                <th>是否离职</th>
                <th>是否登录</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(staff, index) in staffData" :key="staff.id || index">
                <td>{{ staff.id }}</td>
                <td>{{ staff.realname }}</td>
                <td>{{ staff.mobile }}</td>
                <td>{{ staff.dpname }}</td>
                <td>{{ staff.role_name }}</td>
                <td>
                  <el-button type="text" size="small"
                    @click="handleStatusToggle('is_leave', staff, staff.is_leave === '0' ? '1' : '0')"
                    :class="['status-btn', staff.is_leave === '0' ? 'status-active' : 'status-quit']">
                    {{ staff.is_leave === '0' ? '在职' : '离职' }}
                  </el-button>
                </td>
                <td>
                  <el-button type="text" size="small"
                    @click="handleStatusToggle('is_login', staff, staff.is_login === '1' ? '0' : '1')"
                    :class="['status-btn', staff.is_login === '1' ? 'status-enabled' : 'status-disabled-login']">
                    {{ staff.is_login === '1' ? '开启登录' : '关闭登录' }}
                  </el-button>
                </td>
                <td>{{ staff.addtime }}</td>
                <td>
                  <el-button type="text" size="small" @click="handleSwitchUser(staff.id)" :icon="Switch"
                    class="table-icon-btn switch-btn" title="切换用户" />
                  <el-button type="text" size="small" @click="handleResetPassword(staff.id)" :icon="RefreshLeft"
                    class="table-icon-btn reset-btn" title="重置密码" />
                  <el-button type="text" size="small" @click="handleEditStaff(staff)" :icon="Edit"
                    class="table-icon-btn edit-btn" title="编辑" />
                  <el-button type="text" size="small" @click="handleDeleteStaff(staff)" :icon="Delete"
                    class="table-icon-btn delete-btn" title="删除" />
                </td>
              </tr>
              <tr v-if="staffData.length === 0">
                <td colspan="13" style="text-align: center; color: #999; padding: 40px;">
                  暂无员工数据
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页区域 -->
        <div class="common-pagination-section">
          <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :small="true"
            :background="true" layout="total, prev, pager, next, jumper" :total="pagination.total" pager-count="5"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="common-pagination" />
            <button class="tg_btm" @size-change="handleSizeChange">跳转</button>

        </div>
      </div>
    </div>

    <!-- 新增/编辑部门对话框 -->
    <el-dialog v-model="departmentDialogVisible" :title="getDialogTitle()" width="500px" :close-on-click-modal="false"
      @close="resetDepartmentForm" class="department-dialog">
      <el-form ref="departmentFormRef" :model="departmentForm" :rules="departmentRules" label-width="90px"
        class="department-form">
        <el-form-item label="部门名称" prop="dpname" required>
          <el-input v-model="departmentForm.dpname" placeholder="" />
        </el-form-item>

        <el-form-item label="部门类型" prop="type">
          <el-select v-model="departmentForm.type" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="(val, key) in init_option?.depart_type_option || {}" :label="val" :value="key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门负责人" prop="fzr">
          <el-select v-model="departmentForm.fzr" filterable placeholder="请选择" style="width: 100%" clearable>
            <el-option v-for="(item, index) in d_user" :key="index" :label="item.realname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编制" prop="establishing">
          <el-input v-model="departmentForm.establishing" placeholder="" />
        </el-form-item>

        <el-form-item label="排序" prop="orderid">
          <el-input-number v-model="departmentForm.orderid" :min="0" style="width: 100%" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="departmentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDepartmentSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 人员编辑对话框 -->
    <StaffDialog v-model:visible="staffDialogVisible" :staff-id="currentStaffId" :is-edit="isEditStaff"
      :default-department-id="selectedDepartmentId" @submit="handleStaffSubmit" @cancel="handleStaffCancel" />

    <!-- 离职时间设置对话框 -->
    <el-dialog v-model="leave_timeDialogVisible" title="设置离职时间" width="400px" :close-on-click-modal="false">
      <el-form ref="leave_timeFormRef" :model="leave_timeForm">
        <div style="margin-bottom: 20px; color: #666;">
          请填写「{{ leave_timeForm.staffName }}」的离职时间：
        </div>
        <el-form-item label="" prop="leave_time" :rules="[{ required: true, message: '请选择离职时间', trigger: 'change' }]">
          <el-date-picker v-model="leave_timeForm.leave_time" type="date" placeholder="选择日期" style="width: 100%"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="leave_timeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleQuitTimeSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
/**
 * 部门管理页面
 * 功能包括：
 * 1. 左侧部门树形结构展示和管理（增删改查）
 * 2. 右侧人员列表展示和管理
 * 3. 人员状态快速切换（状态、离职、登录权限、业绩显示）
 * 4. 人员信息编辑和新增
 */

// Vue 3 组合式 API 导入
import { ref, reactive, computed, onMounted, watch } from 'vue'
// Element Plus 组件和消息提示导入
import { ElMessage, ElMessageBox } from 'element-plus'
// Element Plus 图标导入
import { Edit, Delete, Plus, Search, Switch, RefreshLeft } from '@element-plus/icons-vue'
// 人员编辑对话框组件导入
import StaffDialog from '@/components/employee/StaffDialog.vue'
// 部门管理API导入
import { departmentApi } from '@/api/department'
// 路由导入
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/user'
// 工具类导入
import TOOLS from '@/utils/tools'

// ==================== 路由和状态管理 ====================
const router = useRouter()

// ==================== 响应式数据定义 ====================
const departmentTreeData = ref([])
const selectedDepartmentId = ref('')
const selectedDepartmentName = ref('')
const departmentDialogVisible = ref(false)
const departmentFormRef = ref()
const departmentTreeRef = ref()
const loading = ref(false)
const staffData = ref([])


const userStore = useUserStore()
const init_option = computed(() => userStore.init_option?.common_option || {})

// 调试信息
console.log('部门管理页面 - userStore.init_option:', userStore.init_option)
console.log('部门管理页面 - init_option.value:', init_option.value)
console.log('部门管理页面 - role_option:', init_option.value?.role_option)

const d_user = ref([])

// 人员对话框相关数据
const staffDialogVisible = ref(false)
const currentStaffId = ref('')
const isEditStaff = ref(false)

// 离职时间对话框相关数据
const leave_timeDialogVisible = ref(false)
const leave_timeFormRef = ref()
const leave_timeForm = reactive({
  staffId: '',
  staffName: '',
  leave_time: ''
})



// 人员筛选数据
const staffFilters = reactive({
  realname: '',
  mobile: '',
  role_id: ' ',
  is_leave: ' ',
  is_login: ' '
})

// 分页数据
const pagination = reactive({
  currentPage: 1,    // 当前页码
  pageSize: 30,      // 每页显示条数
  total: 50          // 总条数，设置一个测试值
})


// 树形组件配置
const treeProps = {
  children: 'children',
  label: 'dpname'
}

// 部门表单
const departmentForm = reactive({
  id: '',
  dpname: '',
  type: '1',
  pid: '0',
  fzr: '',
  establishing: '',
  orderid: 0,
  status: 1
})

// 表单验证规则
const departmentRules = {
  dpname: [
    { required: true, message: '请输入部门名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择部门类型', trigger: 'change' }
  ]
}
// 计算属性
const flatDepartmentList = computed(() => {
  const result = []
  const flatten = (departments) => {
    departments.forEach(dept => {
      result.push(dept)
      if (dept.children && dept.children.length > 0) {
        flatten(dept.children)
      }
    })
  }
  flatten(departmentTreeData.value)
  return result
})

// 生成对话框标题
const getDialogTitle = () => {
  if (departmentForm.id) return '编辑部门'
  if (departmentForm.pid && departmentForm.pid !== '0') {
    const p = flatDepartmentList.value.find(d => d.id === departmentForm.pid)
    return `上级部门：${p ? p.dpname : '未知'}`
  }
  return '新增部门'
}

// ==================== 数据初始化方法 ====================

/**
 * 页面初始化数据加载
 * 在组件挂载时调用，负责加载页面所需的基础数据
 *
 * 执行流程：
 * 1. 调用 loadDepartmentTree() 加载部门树结构
 * 2. 如果加载失败，显示错误提示
 *
 * @async
 * @function initData
 * @returns {Promise<void>}
 */
const initData = async () => {
  try {
    // 强制清理并重新加载用户数据
    console.log('清理localStorage并重新加载用户数据...')
    localStorage.removeItem('init_option')
    userStore.restoreUserInfo()

    // 调试信息
    console.log('initData - userStore.init_option:', userStore.init_option)
    console.log('initData - common_option:', userStore.init_option?.common_option)
    console.log('initData - role_option:', userStore.init_option?.common_option?.role_option)

    await loadDepartmentTree()
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('加载部门数据失败')
  }
}

/**
 * 加载部门树形结构数据
 * 从后端API获取完整的部门层级结构，并自动选中第一个部门
 *
 * 功能说明：
 * 1. 设置加载状态，显示loading效果
 * 2. 调用部门API获取树形数据
 * 3. 解析响应数据并更新本地状态
 * 4. 自动选中第一个部门并加载其员工列表
 * 5. 处理异常情况并清理加载状态
 *
 * @async
 * @function loadDepartmentTree
 * @returns {Promise<void>}
 * @throws {Error} 当API调用失败或数据格式错误时抛出异常
 */
const loadDepartmentTree = async () => {
  try {
    // 开启加载状态，在UI上显示loading动画
    loading.value = true

    // 调用部门管理API获取树形结构数据
    const response = await departmentApi.getDepartmentTree()

    // 检查API响应状态
    if (response.status) {
      // 更新部门树数据到本地状态
      departmentTreeData.value = response.data.depart_list

      // 如果有部门数据，自动选中第一个部门
      if (departmentTreeData.value.length > 0) {
        const firstDept = departmentTreeData.value[0]
        await selectDepartment(firstDept)
      }
    } else {
      // API返回失败状态，抛出错误
      throw new Error(response.message || '获取部门数据失败')
    }
  } catch (error) {
    console.error('加载部门树失败:', error)
    throw error
  } finally {
    // 无论成功失败都要关闭loading状态
    loading.value = false
  }
}

// ==================== 部门选择和数据加载方法 ====================

/**
 * 选择部门并加载对应的员工列表
 * 当用户点击部门树节点时调用，切换当前选中的部门
 *
 * 功能说明：
 * 1. 更新当前选中的部门ID和名称
 * 2. 同步更新树形组件的选中状态
 * 3. 加载该部门下的员工列表数据
 * 4. 重置分页到第一页
 *
 * @async
 * @function selectDepartment
 * @param {Object} dept - 部门对象
 * @param {string} dept.id - 部门ID
 * @param {string} dept.dpname - 部门名称
 * @returns {Promise<void>}
 */
const selectDepartment = async (dept) => {
  console.log('选择部门:', dept)

  // 更新当前选中的部门信息
  selectedDepartmentId.value = dept.id
  selectedDepartmentName.value = dept.dpname

  // 延迟设置树形组件的当前选中节点，确保DOM已更新
  setTimeout(() => {
    if (departmentTreeRef.value) {
      departmentTreeRef.value.setCurrentKey(dept.id)
    }
  }, 100)

  // 加载该部门下的员工列表
  await loadStaffList(dept.id)
}

/**
 * 加载指定部门的员工列表数据
 * 根据部门ID和当前筛选条件，从后端获取员工列表并更新表格显示
 *
 * 功能说明：
 * 1. 构建搜索参数（包含部门ID和筛选条件）
 * 2. 调用员工列表API获取数据
 * 3. 更新表格数据和分页信息
 * 4. 处理加载状态和异常情况
 *
 * 参数说明：
 * - 搜索条件通过POST方式传递
 * - 分页参数通过GET方式传递
 *
 * @async
 * @function loadStaffList
 * @param {string} departmentId - 部门ID
 * @returns {Promise<void>}
 */
const loadStaffList = async (departmentId) => {
  try {
    console.log('开始加载员工列表，部门ID:', departmentId)

    // 构建搜索条件（POST数据）
    const searchData = {
      did: departmentId,        // 部门ID
      ...staffFilters          // 展开当前的筛选条件
    }

    console.log('搜索条件:', searchData)

    // 获取当前分页参数（GET参数）
    const page = pagination.currentPage

    // 调用API获取员工列表数据
    const response = await departmentApi.getStaffList(searchData, page)

    console.log('API响应:', response)

    // 检查API响应状态并更新数据
    if (response.status) {
      // 更新员工列表数据
      staffData.value = response.data.list || []
      // 更新分页总数
      pagination.total = Number(response.data.count)

      console.log('员工数据加载成功，数量:', staffData.value.length)

    } else {
      // API返回失败状态，清空数据
      staffData.value = []
      pagination.total = 0
      console.log('API返回失败状态:', response.msg)
    }
  } catch (error) {
    // 捕获异常并显示错误提示
    console.error('加载员工列表失败:', error)
    ElMessage.error('加载员工列表失败')
    // 清空数据避免显示错误信息
    staffData.value = []
    pagination.total = 0
  }
}

// ==================== 辅助数据加载方法 ====================

/**
 * 获取指定部门下的员工列表（用于部门负责人选择）
 * 在新增/编辑部门时调用，为部门负责人下拉框提供数据源
 *
 * 功能说明：
 * 1. 根据部门ID获取该部门下的所有员工
 * 2. 在列表开头添加"空缺"选项，表示该部门暂无负责人
 * 3. 更新部门负责人选择器的数据源
 *
 * 使用场景：
 * - 新增子部门时，获取父部门的员工作为负责人候选
 * - 编辑部门时，获取上级部门的员工作为负责人候选
 *
 * @async
 * @function get_sub_department_employee
 * @param {string} did - 部门ID
 * @returns {Promise<void>}
 */
const get_sub_department_employee = async (did) => {
  try {
    // 调用API获取指定部门下的员工列表
    const response = await departmentApi.get_sub_department_employee(did)

    // 更新员工数据到本地状态
    d_user.value = response.data

    // 在列表开头添加"空缺"选项，允许部门暂无负责人
    d_user.value.unshift({ id: "0", realname: "空缺" });
  } catch (error) {
    console.error('获取部门员工失败:', error)
  }
}

// ==================== 部门树事件处理方法 ====================

/**
 * 处理部门树节点点击事件
 * 当用户点击部门树中的某个节点时触发
 *
 * 功能说明：
 * 1. 记录用户点击的部门信息
 * 2. 调用selectDepartment方法切换当前选中部门
 * 3. 自动加载该部门下的员工列表
 *
 * @async
 * @function handleNodeClick
 * @param {Object} data - 被点击的部门节点数据
 * @param {string} data.dpname - 部门名称
 * @param {string} data.id - 部门ID
 * @returns {Promise<void>}
 */
const handleNodeClick = async (data) => {

  await selectDepartment(data)
}

/**
 * 处理添加子部门操作
 * 当用户点击部门节点的"添加子部门"按钮时触发
 *
 * 功能说明：
 * 1. 重置部门表单数据
 * 2. 设置父部门ID为当前选中的部门
 * 3. 获取父部门下的员工列表（用于选择负责人）
 * 4. 显示部门编辑对话框
 *
 * @function handleAddSubDepartment
 * @param {Object} parentDept - 父部门对象
 * @param {string} parentDept.id - 父部门ID
 * @returns {void}
 */
const handleAddSubDepartment = (parentDept) => {
  // 重置表单数据
  resetDepartmentForm()
  // 设置父部门ID
  departmentForm.pid = parentDept.id
  // 显示对话框
  departmentDialogVisible.value = true
  // 获取父部门下的员工列表，用于选择负责人
  get_sub_department_employee(parentDept.id);
}

/**
 * 处理编辑部门操作
 * 当用户点击部门节点的"编辑"按钮时触发
 *
 * 功能说明：
 * 1. 将部门数据填充到表单中
 * 2. 获取上级部门的员工列表（用于重新选择负责人）
 * 3. 显示部门编辑对话框
 *
 * @function handleEditDepartment
 * @param {Object} dept - 要编辑的部门对象
 * @param {string} dept.pid - 上级部门ID
 * @returns {void}
 */
const handleEditDepartment = (dept) => {
  // 将部门数据复制到表单中
  Object.assign(departmentForm, dept)
  // 显示对话框
  departmentDialogVisible.value = true
  // 获取上级部门的员工列表，用于选择负责人
  get_sub_department_employee(dept.pid);
}

/**
 * 处理删除部门操作
 * 当用户点击部门节点的"删除"按钮时触发
 *
 * 功能说明：
 * 1. 显示确认对话框，防止误删除
 * 2. 用户确认后调用删除API
 * 3. 删除成功后重新加载部门树
 * 4. 处理用户取消和异常情况
 *
 * 安全措施：
 * - 必须用户确认才能执行删除
 * - 区分用户取消和系统错误
 * - 删除后自动刷新数据
 *
 * @async
 * @function handleDeleteDepartment
 * @param {Object} dept - 要删除的部门对象
 * @param {string} dept.id - 部门ID
 * @param {string} dept.dpname - 部门名称
 * @returns {Promise<void>}
 */
const handleDeleteDepartment = async (dept) => {
  try {
    // 显示确认对话框，防止误删除
    await ElMessageBox.confirm(
      `确定要删除部门"${dept.dpname}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 用户确认后，调用删除接口
    await departmentApi.deleteDepartment(dept.id)
    ElMessage.success('删除成功')

    // 删除成功后重新加载部门树
    await loadDepartmentTree()
  } catch (error) {
    // 区分用户取消和系统错误
    if (error !== 'cancel') {
      console.error('删除部门失败:', error)
      ElMessage.error('删除失败')
    } else {
      ElMessage.info('已取消删除')
    }
  }
}

/**
 * 处理部门表单提交操作
 * 当用户在部门编辑对话框中点击"提交"按钮时触发
 *
 * 功能说明：
 * 1. 验证表单数据的完整性和有效性
 * 2. 根据是否有ID判断是新增还是编辑操作
 * 3. 调用相应的API接口执行操作
 * 4. 操作成功后关闭对话框并刷新数据
 * 5. 处理验证失败和API调用异常
 *
 * 业务逻辑：
 * - 有ID：编辑现有部门
 * - 无ID：新增部门
 *
 * @async
 * @function handleDepartmentSubmit
 * @returns {Promise<void>}
 */
const handleDepartmentSubmit = async () => {
  try {
    // 验证表单数据
    await departmentFormRef.value.validate()

    // 根据是否有ID判断操作类型
    const isEdit = !!departmentForm.id

    // 选择对应的API调用
    const apiCall = isEdit
      ? departmentApi.updateDepartment(departmentForm)
      : departmentApi.createDepartment(departmentForm)

    // 执行API调用
    await apiCall

    // 显示成功消息
    ElMessage.success(isEdit ? '编辑成功' : '新增成功')

    // 关闭对话框
    departmentDialogVisible.value = false

    // 重新加载部门树以显示最新数据
    await loadDepartmentTree()
  } catch (error) {
    // 区分API错误和表单验证错误
    if (error.message) {
      console.error('部门操作失败:', error)
      ElMessage.error(error.message || '操作失败')
    } else {
      console.error('表单验证失败:', error)
    }
  }
}

/**
 * 重置部门表单数据
 * 将表单恢复到初始状态，清除所有用户输入
 *
 * 功能说明：
 * 1. 重置所有表单字段为默认值
 * 2. 清除表单验证状态
 * 3. 确保表单处于干净的初始状态
 *
 * 使用场景：
 * - 打开新增部门对话框时
 * - 关闭部门编辑对话框时
 * - 表单提交失败需要重置时
 *
 * @function resetDepartmentForm
 * @returns {void}
 */
const resetDepartmentForm = () => {
  // 重置表单数据到默认值
  Object.assign(departmentForm, {
    id: '',              // 部门ID（空表示新增）
    dpname: '',          // 部门名称
    type: '1',           // 部门类型（默认为1）
    pid: '0',            // 父部门ID（0表示顶级部门）
    fzr: '',             // 负责人ID
    establishing: '',     // 编制人数
    orderid: 0,          // 排序号
    status: 1            // 状态（1表示启用）
  })

  // 清除表单验证状态
  departmentFormRef.value?.clearValidate()
}

// ==================== 员工搜索和管理方法 ====================

/**
 * 处理员工搜索操作
 * 当用户点击搜索按钮或按下回车键时触发
 *
 * 功能说明：
 * 1. 使用当前的筛选条件重新加载员工列表
 * 2. 重置分页到第一页（因为搜索结果可能改变总数）
 * 3. 只在有选中部门的情况下执行搜索
 *
 * 搜索条件包括：
 * - 姓名（模糊匹配）
 * - 手机号（精确匹配）
 * - 职位（下拉选择）
 * - 状态（受理中/暂停受理）
 * - 是否离职（在职/离职）
 *
 * @async
 * @function handleSearch
 * @returns {Promise<void>}
 */
const handleSearch = async () => {


  // 确保有选中的部门才执行搜索
  if (selectedDepartmentId.value) {
    // 重置到第一页，因为搜索结果可能改变总数
    pagination.currentPage = 1
    // 使用当前筛选条件重新加载员工列表
    await loadStaffList(selectedDepartmentId.value)
  }
}

/**
 * 重置搜索条件
 * 清空所有筛选条件并重新加载完整的员工列表
 *
 * 功能说明：
 * 1. 将所有筛选字段重置为空值
 * 2. 重置分页到第一页
 * 3. 重新加载当前部门的完整员工列表
 *
 * 使用场景：
 * - 用户想要查看完整的员工列表
 * - 清除之前的搜索条件
 *
 * @async
 * @function handleReset
 * @returns {Promise<void>}
 */
const handleReset = async () => {
  // 重置所有搜索条件为空值
  Object.assign(staffFilters, {
    realname: '',    // 姓名
    mobile: '',      // 手机号
    role_id: ' ',    // 职位ID
    is_leave: ' ',   // 是否离职
    is_login: ' '    // 是否登录
  })

  // 重新搜索（显示完整列表）
  if (selectedDepartmentId.value) {
    pagination.currentPage = 1
    await loadStaffList(selectedDepartmentId.value)
  }
}

/**
 * 处理添加员工操作
 * 当用户点击"添加人员"按钮时触发
 *
 * 功能说明：
 * 1. 设置为新增模式（非编辑模式）
 * 2. 清空当前员工数据
 * 3. 显示员工编辑对话框
 *
 * 对话框将以新增模式打开，表单为空白状态
 *
 * @function handleAddStaff
 * @returns {void}
 */
const handleAddStaff = () => {
  // 设置为新增模式
  isEditStaff.value = false
  // 清空员工ID
  currentStaffId.value = ''
  // 显示员工编辑对话框
  staffDialogVisible.value = true
}

// ==================== 员工对话框事件处理方法 ====================

/**
 * 处理员工表单提交操作
 * 当用户在员工编辑对话框中点击"提交"按钮时触发
 *
 * 功能说明：
 * 1. 根据是否有员工ID判断是新增还是编辑操作
 * 2. 为新增员工自动添加当前选中的部门ID
 * 3. 调用相应的API接口执行操作
 * 4. 操作成功后刷新员工列表
 * 5. 处理API调用异常并显示错误信息
 *
 * 业务逻辑：
 * - 有ID：编辑现有员工信息
 * - 无ID：在当前部门下新增员工
 *
 * @async
 * @function handleStaffSubmit
 * @param {Object} staffData - 员工表单数据
 * @param {string} [staffData.id] - 员工ID（编辑时存在）
 * @param {string} staffData.realname - 员工姓名
 * @param {string} staffData.mobile - 手机号
 * @param {string} staffData.role_id - 职位ID
 * @returns {Promise<void>}
 */
const handleStaffSubmit = async (staffData) => {
  try {
    // 根据是否有ID判断操作类型
    const isEdit = !!staffData.id

    // 选择对应的API调用
    const apiCall = isEdit
      ? departmentApi.updateStaff(staffData)
      : departmentApi.createStaff({
        ...staffData,
        did: selectedDepartmentId.value  // 新增时添加当前部门ID
      })

    // 执行API调用
    await apiCall

    // 显示成功消息
    ElMessage.success(isEdit ? '编辑人员成功' : '添加人员成功')

    // 重新加载员工列表以显示最新数据
    await loadStaffList(selectedDepartmentId.value)
  } catch (error) {
    console.error('员工操作失败:', error)
    ElMessage.error('操作失败')
  }
}

/**
 * 处理员工对话框取消操作
 * 当用户在员工编辑对话框中点击"取消"按钮时触发
 *
 * 功能说明：
 * 目前为空实现，对话框的关闭由组件内部处理
 * 可以在此处添加取消时的清理逻辑
 *
 * @function handleStaffCancel
 * @returns {void}
 */
const handleStaffCancel = () => {
  // 清除员工ID
  currentStaffId.value = ''
  // 可以在此处添加取消时的清理逻辑，如：
  // - 清除临时数据
  // - 重置表单状态
  // - 记录用户操作日志等
}

/**
 * 处理编辑员工操作
 * 当用户点击员工表格中的"编辑"按钮时触发
 *
 * 功能说明：
 * 1. 设置为编辑模式
 * 2. 将员工数据复制到当前编辑数据中
 * 3. 显示员工编辑对话框
 *
 * 注意：使用深拷贝避免直接修改原始数据
 *
 * @function handleEditStaff
 * @param {Object} staffData - 要编辑的员工数据
 * @param {string} staffData.id - 员工ID
 * @param {string} staffData.realname - 员工姓名
 * @param {string} staffData.mobile - 手机号
 * @returns {void}
 */
const handleEditStaff = (staffData) => {
  // 设置为编辑模式
  isEditStaff.value = true
  // 设置员工ID
  currentStaffId.value = staffData.id
  // 显示员工编辑对话框
  staffDialogVisible.value = true
}

// ==================== 员工操作方法 ====================

/**
 * 处理删除员工操作
 * 当用户点击员工表格中的"删除"按钮时触发
 *
 * 功能说明：
 * 1. 显示确认对话框，防止误删除
 * 2. 用户确认后调用删除API
 * 3. 删除成功后重新加载员工列表
 * 4. 处理用户取消和异常情况
 *
 * 安全措施：
 * - 必须用户确认才能执行删除
 * - 区分用户取消和系统错误
 * - 删除后自动刷新数据
 *
 * @async
 * @function handleDeleteStaff
 * @param {Object} staffData - 要删除的员工数据
 * @param {string} staffData.id - 员工ID
 * @param {string} staffData.realname - 员工姓名
 * @returns {Promise<void>}
 */
const handleDeleteStaff = async (staffData) => {
  try {
    // 显示确认对话框，防止误删除
    await ElMessageBox.confirm(
      `确定要删除人员"${staffData.realname}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 用户确认后，调用删除接口
    await departmentApi.deleteStaff(staffData.id)
    ElMessage.success('删除成功')

    // 删除成功后重新加载员工列表
    await loadStaffList(selectedDepartmentId.value)
  } catch (error) {
    // 区分用户取消和系统错误
    if (error !== 'cancel') {
      console.error('删除员工失败:', error)
      ElMessage.error('删除失败')
    } else {
      ElMessage.info('已取消删除')
    }
  }
}

/**
 * 处理切换用户操作
 * 当管理员点击员工表格中的"切换用户"按钮时触发
 *
 * 功能说明：
 * 1. 调用切换用户API，以指定员工身份登录系统
 * 2. 切换成功后跳转到首页
 * 3. 强制刷新页面以应用新的用户身份
 *
 * 使用场景：
 * - 管理员需要以员工身份查看系统
 * - 调试员工权限问题
 * - 代替员工进行操作
 *
 * 注意：此功能需要管理员权限
 *
 * @async
 * @function handleSwitchUser
 * @param {string} staffId - 要切换到的员工ID
 * @returns {Promise<void>}
 */
const handleSwitchUser = async (staffId) => {
  try {
    // 调用切换用户API
    await departmentApi.switchUser(staffId)

    // 切换成功后跳转到首页
    router.push('/')

    // 强制刷新页面以应用新的用户身份和权限
    window.location.href = '/'
  } catch (error) {
    console.error('切换用户失败:', error)
    ElMessage.error('切换用户失败')
  }
}

/**
 * 处理重置员工密码操作
 * 当管理员点击员工表格中的"重置密码"按钮时触发
 *
 * 功能说明：
 * 1. 显示确认对话框，确保管理员了解操作后果
 * 2. 用户确认后调用重置密码API
 * 3. 显示重置结果（通常包含新密码）
 * 4. 重新加载员工列表以更新状态
 *
 * 安全考虑：
 * - 需要管理员确认才能执行
 * - 重置后应通知员工新密码
 * - 建议员工首次登录后修改密码
 *
 * @async
 * @function handleResetPassword
 * @param {string} staffId - 要重置密码的员工ID
 * @returns {Promise<void>}
 */
const handleResetPassword = async (staffId) => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      '确定重置密码？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    // 调用重置密码API
    const response = await departmentApi.resetStaffPassword(staffId)

    // 显示重置结果（API返回的消息可能包含新密码）
    ElMessage.success(response.data?.msg || '重置密码成功')

    // 重新加载员工列表以更新相关状态
    await loadStaffList(selectedDepartmentId.value)

  } catch (error) {
    // 区分用户取消和系统错误
    if (error !== 'cancel') {
      console.error('重置密码失败:', error)
      ElMessage.error('重置密码失败')
    }
  }
}





// ==================== 员工状态切换方法 ====================

/**
 * 处理员工状态切换
 * @param {string} type - 状态类型 ('is_leave' | 'is_login')
 * @param {Object} staff - 员工数据
 * @param {string} status - 目标状态值
 */
const handleStatusToggle = async (type, staff, status) => {
  try {
    let confirmMessage = ""

    if (type === "is_leave" && status === "1") {
      // 设置离职状态需要选择离职时间
      leave_timeDialogVisible.value = true
      leave_timeForm.staffId = staff.id
      leave_timeForm.staffName = staff.realname || '该员工'
      leave_timeForm.leave_time = ''
      return
    } else if (type === "is_leave" && status === "0") {
      confirmMessage = "确定要恢复该员工的在职状态吗？"
    } else if (type === "is_login") {
      const loginStatusMap = {
        '0': '关闭登录',
        '1': '开启登录'
      }
      confirmMessage = `确定要将登录权限修改为"${loginStatusMap[status] || status}"吗？`
    }

    // 显示确认对话框
    if (confirmMessage) {
      await ElMessageBox.confirm(confirmMessage, '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
    }

    // 更新员工状态（Mock模式下直接更新本地数据）
    const staffIndex = staffData.value.findIndex(s => s.id === staff.id)
    if (staffIndex !== -1) {
      staffData.value[staffIndex][type] = status
      ElMessage.success('状态修改成功')
    }

  } catch (error) {
    if (error !== 'cancel') {
      console.error('状态切换失败:', error)
      ElMessage.error('状态修改失败')
    }
  }
}

/**
 * 处理离职时间提交
 */
const handleQuitTimeSubmit = async () => {
  try {
    // 验证表单
    await leave_timeFormRef.value.validate()

    // 更新员工离职状态（Mock模式下直接更新本地数据）
    const staffIndex = staffData.value.findIndex(s => s.id === leave_timeForm.staffId)
    if (staffIndex !== -1) {
      staffData.value[staffIndex].is_leave = '1'
      staffData.value[staffIndex].leave_time = leave_timeForm.leave_time
      ElMessage.success('离职状态设置成功')
    }

    // 关闭对话框
    leave_timeDialogVisible.value = false

  } catch (error) {
    if (error.message) {
      console.error('设置离职状态失败:', error)
      ElMessage.error('设置离职状态失败')
    }
  }
}

// ==================== 分页处理方法 ====================

// 创建分页处理器
const paginationHandlers = TOOLS.createPaginationHandlers(
  pagination,
  null, // 这个页面没有 form.page_size
  async () => {
    // 如果有选中的部门，重新加载员工列表
    if (selectedDepartmentId.value) {
      await loadStaffList(selectedDepartmentId.value)
    }
  },
  { scrollToTopOnPageChange: true }
)

// 使用公共分页处理方法
const { handleSizeChange, handleCurrentChange } = paginationHandlers

// ==================== 组件生命周期 ====================

/**
 * 组件挂载完成后的初始化操作
 * 在Vue组件挂载到DOM后自动执行
 *
 * 功能说明：
 * 1. 调用initData()方法初始化页面数据
 * 2. 加载部门树结构
 * 3. 自动选中第一个部门并加载其员工列表
 *
 * 执行时机：
 * - 组件DOM挂载完成后
 * - 在用户看到页面之前完成数据加载
 *
 * @function onMounted
 * @returns {void}
 */
onMounted(() => {
  // 初始化页面数据
  initData()
})
</script>

<style scoped>
.department-container {
  height: 100%;
  background-color: #f5f7fa;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

.main-content {
  height: 100%;
  display: flex;
  padding: 0 !important;
}

/* 左侧部门树样式 */
.department-tree-panel {
  max-width: 300px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.tree-header {
  height: 50px;
  background: var(--theme-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-weight: 500;
  border-bottom: 1px solid #e4e7ed;
}

.header-title {
  font-size: 14px;
  font-weight: 600;
}

.tree-content {
  flex: 1;
  overflow-y: auto;
}

.tree-node-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 0;
}

.node-label {
  flex: 1;
  font-size: 13px;
  color: #666;
}

.el-button+.el-button {
  margin: 0;
}

.tree-node-content:hover .node-actions {
  display: flex;
}


.action-btn {
  padding: 2px 4px;
  color: #909399;
  border: none;
  background: none;
  border-radius: 2px;
  font-size: 11px;
}

.action-btn:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.delete-btn:hover {
  color: #f56c6c;
  background-color: #fef0f0;
}

/* 右侧内容区域样式 */
.content-panel {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
}

.panel-header {
  background: var(--theme-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #ebeef5;
}

/* 筛选区域样式 */
.filter-section {
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.filter-form :deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 10px;
}

.filter-form :deep(.el-form-item__label) {
  color: #606266;
  font-weight: 500;
}



.filter-form :deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 8px;
}

.filter-form :deep(.el-form-item__label) {
  font-size: 13px;
  color: #666;
}

.filter-form :deep(.el-input__inner),
.filter-form :deep(.el-select .el-input__inner) {
  font-size: 13px;
  height: 28px;
}

.add-btn-row {
  display: flex;
  justify-content: flex-start;
}

/* 表格样式已移至公共样式文件 */

/* 表格图标按钮样式 */
.table-icon-btn {
  padding: 4px !important;
  margin: 0 2px !important;
  min-width: auto !important;
  width: 24px !important;
  height: 24px !important;
}

.table-icon-btn.switch-btn {
  color: #409eff !important;
}

.table-icon-btn.switch-btn:hover {
  color: #337ecc !important;
  background-color: #ecf5ff !important;
}

.table-icon-btn.reset-btn {
  color: #909399 !important;
}

.table-icon-btn.reset-btn:hover {
  color: #606266 !important;
  background-color: #f4f4f5 !important;
}

.table-icon-btn.edit-btn {
  color: #4a90e2 !important;
}

.table-icon-btn.edit-btn:hover {
  color: #1a9a93 !important;
  background-color: #e8f4fd !important;
}

.table-icon-btn.delete-btn {
  color: #f56c6c !important;
}

.table-icon-btn.delete-btn:hover {
  color: #e85656 !important;
  background-color: #fef0f0 !important;
}

/* 状态按钮样式 */
.status-btn {
  padding: 2px 8px !important;
  margin: 0 !important;
  min-width: auto !important;
  height: auto !important;
  font-size: 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
}

.status-btn.status-processing {
  color: #e6a23c !important;
  background-color: #fdf6ec !important;
  border-color: #f5dab1 !important;
}

.status-btn.status-processing:hover {
  background-color: #faecd8 !important;
}

.status-btn.status-active {
  color: #67c23a !important;
  background-color: #f0f9ff !important;
  border-color: #b3d8ff !important;
}

.status-btn.status-active:hover {
  background-color: #e1f3ff !important;
}

.status-btn.status-enabled {
  color: #409eff !important;
  background-color: #ecf5ff !important;
  border-color: #b3d8ff !important;
}

.status-btn.status-enabled:hover {
  background-color: #d9ecff !important;
}

.status-btn.status-show {
  color: #909399 !important;
  background-color: #f4f4f5 !important;
  border-color: #d3d4d6 !important;
}

.status-btn.status-show:hover {
  background-color: #e9e9eb !important;
}

/* 不同状态的颜色变体 */
.status-btn.status-normal {
  color: #67c23a !important;
  background-color: #f0f9ff !important;
  border-color: #b3d8ff !important;
}

.status-btn.status-disabled {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.status-btn.status-quit {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.status-btn.status-disabled-login {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.status-btn.status-hidden {
  color: #909399 !important;
  background-color: #f4f4f5 !important;
  border-color: #d3d4d6 !important;
}

/* 表格图标按钮样式 */
.table-icon-btn {
  padding: 4px !important;
  margin: 0 2px !important;
  min-width: auto !important;
  width: 24px !important;
  height: 24px !important;
}

.table-icon-btn.switch-btn {
  color: #409eff !important;
}

.table-icon-btn.switch-btn:hover {
  color: #337ecc !important;
  background-color: #ecf5ff !important;
}

.table-icon-btn.reset-btn {
  color: #909399 !important;
}

.table-icon-btn.reset-btn:hover {
  color: #606266 !important;
  background-color: #f4f4f5 !important;
}

.table-icon-btn.edit-btn {
  color: #4a90e2 !important;
}

.table-icon-btn.edit-btn:hover {
  color: #1a9a93 !important;
  background-color: #e8f4fd !important;
}

.table-icon-btn.delete-btn {
  color: #f56c6c !important;
}

.table-icon-btn.delete-btn:hover {
  color: #e85656 !important;
  background-color: #fef0f0 !important;
}

/* 状态徽章样式 */
.status-badge {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
  border: 1px solid transparent;
  display: inline-block;
}

.status-badge.status-active {
  color: #67c23a;
  background-color: #f0f9ff;
  border-color: #b3d8ff;
}

.status-badge.status-quit {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

.status-badge.status-enabled {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #b3d8ff;
}

.status-badge.status-disabled {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}

/* 状态按钮样式 */
.status-btn {
  padding: 2px 8px !important;
  margin: 0 !important;
  min-width: auto !important;
  height: auto !important;
  font-size: 11px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
}

.status-btn.status-active {
  color: #67c23a !important;
  background-color: #f0f9ff !important;
  border-color: #b3d8ff !important;
}

.status-btn.status-quit {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.status-btn.status-enabled {
  color: #409eff !important;
  background-color: #ecf5ff !important;
  border-color: #b3d8ff !important;
}

.status-btn.status-disabled-login {
  color: #f56c6c !important;
  background-color: #fef0f0 !important;
  border-color: #fbc4c4 !important;
}

.status-btn:hover {
  opacity: 0.8;
}

/* 对话框样式 */
.department-dialog :deep(.el-dialog__header) {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.department-dialog :deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.department-form {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 自定义滚动条 */
.tree-content::-webkit-scrollbar {
  width: 6px;
}

.tree-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tree-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

:deep(.el-tree-node__expand-icon) {
  color: #666;
  visibility: inherit;
}

.common-table-container {
  padding: 10px;
}
</style>
